import React from 'react';
import { connect } from 'dva/index';
import { Table, Modal, Form, Row, Col, Button } from 'antd';
import CostDetail from './costDetail';

const R = require('ramda');

let costDetail: any = {};

const costList = Form.create()(
  class CostList extends React.Component {
    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
        selectedLockedFeeKeys: [],
        selectedLockedFees: [],
      };
    }

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    dataSource = [
      {
        id: 1,
        costObject: '广州丑寅电子商务责任有限公司',
        costSubject: 'GPS',
        price: 100,
        number: 50,
        currency: 'USD',
        rate: 7.12,
        status: '未付款',
        creator: '周星驰',
        createtime: '2019-01-01',
      },
      {
        id: 2,
        costObject: '广州丑寅电子商务责任有限公司',
        costSubject: 'GPS',
        price: 100,
        number: 50,
        currency: 'USD',
        rate: 7.12,
        status: '未付款',
        creator: '周星驰',
        createtime: '2019-01-01',
      },
    ];

    columns = [
      {
        title: '结算单位',
        dataIndex: 'costObject',
        key: 'costObject',
      },
      {
        title: '费用科目',
        dataIndex: 'costSubject',
        key: 'costSubject',
      },
      {
        title: '单价',
        dataIndex: 'price',
        key: 'price',
      },
      {
        title: '数量',
        dataIndex: 'number',
        key: 'number',
      },
      {
        title: '币种',
        dataIndex: 'currency',
        key: 'currency',
      },
      {
        title: '汇率',
        dataIndex: 'rate',
        key: 'rate',
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
      },
      {
        title: '创建人',
        dataIndex: 'creator',
        key: 'creator',
      },
      {
        title: '创建时间',
        dataIndex: 'createtime',
        key: 'createtime',
      },
    ];

    render() {
      let rowSelection = {
        onChange: (selectedRowKeys: any, selectedRows: any) => {
          this.setState({
            selectedLockedFeeKeys: selectedRowKeys,
          });
        },
        onSelect: (record: any, selected: any, selectedRows: any, nativeEvent: any) => {
          // @ts-ignore
          let selectedLockedFees = [...this.state.selectedLockedFees];
          if (selected) selectedLockedFees.push(record);
          else selectedLockedFees = R.difference(selectedLockedFees, [record]);
          this.setState({ selectedLockedFees });
        },
        onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
          // @ts-ignore
          let selectedLockedFees = [...this.state.selectedLockedFees];
          if (selected) selectedLockedFees = selectedLockedFees.concat(changeRows);
          else selectedLockedFees = R.difference(selectedLockedFees, changeRows);
          this.setState({ selectedLockedFees });
        },
        // @ts-ignore
        selectedRowKeys: this.state.selectedLockedFeeKeys,
      };

      // @ts-ignore
      const { getFieldDecorator } = this.props.form;
      return (
        // @ts-ignore
        <Modal
          maskClosable={false}
          visible={this.state.open}
          width={850}
          title={'费用详情'}
          confirmLoading={this.props.loading}
          onCancel={this.handleCancel.bind(this)}
          footer={false}
        >
          <Row>
            <Col span={4}>
              <Button type="primary" onClick={() => costDetail.handleOpen()}>
                新增费用
              </Button>
            </Col>
            <Col span={4}>
              <Button type="primary">核销/付款</Button>
            </Col>
          </Row>
          <Table
            columns={this.columns}
            dataSource={this.dataSource}
            size="middle"
            pagination={false}
            rowSelection={rowSelection}
            style={{ marginTop: 10 }}
          ></Table>
          <CostDetail
            wrappedComponentRef={(inst: any) => {
              costDetail = inst;
              return costDetail;
            }}
            {...costDetail}
          />
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.orderCharge,
    orderCharge: state.orderCharge,
    feeItem: state.feeItem,
    supplier: state.supplier,
    company: state.company,
  };
}

export default connect(mapStateToProps)(costList);
